<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">
	
	<ui:define name="head">
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	</ui:define>

	<ui:define name="content">

		<h1 class="title ui-widget-header ui-corner-all">GMap - Circle</h1>
		<div class="entry">
			<p>Any number of circles can be displayed on map. Circles can also respond to selection by via overlaySelect behavior.</p>
			
			<h:form>
				<p:growl id="growl" life="3000"/>
				
				<p:gmap center="36.880257,30.687417" zoom="13" type="HYBRID" style="width:600px;height:400px" model="#{mapBean.circleModel}">
                                    <p:ajax event="overlaySelect" listener="#{mapBean.onCircleSelect}" update="growl"/>
                                </p:gmap>
			</h:form>

			<h3>Source</h3>
			<p:tabView>
				<p:tab title="gmapCircle.xhtml">
					<pre name="code" class="xml">
&lt;h:form&gt;
	&lt;p:growl id="growl" life="3000"/&gt;
	
	&lt;p:gmap center="36.890257,30.707417" zoom="13" type="HYBRID" style="width:600px;height:400px" model="\#{mapBean.circleModel}"&gt;
            &lt;p:ajax event="overlaySelect" listener="\#{mapBean.onCircleSelect}" update="growl"/&gt;
    &lt;/p:gmap&gt;
&lt;/h:form&gt;
					</pre>
				</p:tab>
				
				<p:tab title="MapBean.java">
					<pre name="code" class="java">
package org.primefaces.examples.view;

import java.io.Serializable;

import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;

import org.primefaces.event.map.OverlaySelectEvent;
import org.primefaces.model.map.DefaultMapModel;
import org.primefaces.model.map.LatLng;
import org.primefaces.model.map.MapModel;
import org.primefaces.model.map.Circle;

public class MapBean implements Serializable {

	private MapModel circleModel;
	
	public MapBean() {
            circleModel = new DefaultMapModel();

            //Shared coordinates
            LatLng coord1 = new LatLng(36.879466, 30.667648);
            LatLng coord4 = new LatLng(36.885233, 30.702323);

            //Circle
            Circle circle1 = new Circle(coord1, 500);
            circle1.setStrokeColor("#d93c3c");
            circle1.setFillColor("#d93c3c");
            circle1.setFillOpacity(0.5);

            Circle circle2 = new Circle(coord4, 300);
            circle2.setStrokeColor("#00ff00");
            circle2.setFillColor("#00ff00");
            circle2.setStrokeOpacity(0.7);
            circle2.setFillOpacity(0.7);

            circleModel.addOverlay(circle1);
            circleModel.addOverlay(circle2);
	}

	public MapModel getCircleModel() {
            return circleModel;
	}

	public void onCircleSelect(OverlaySelectEvent event) {
            addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "Circle Selected", null));
	}

	public void addMessage(FacesMessage message) {
            FacesContext.getCurrentInstance().addMessage(null, message);
	}
}
					</pre>
				</p:tab>
			</p:tabView>									
		</div>
	</ui:define>
</ui:composition>